<template>
  <div class="content-list">
    <ul class="section-content">
      <li class="content-item" v-for="(item,index) in contentList" :key="index">
        <div class="kuo" @click="goAlbum(item)">
          <img class="item-img" :src="attachImageUrl(item.pic)">
          <div class="mask">
            <svg class="icon">
              <use xlink:href="#icon-bofang"/>
            </svg>
          </div>
        </div>
        <p class="item-name" style="text-align: center">{{item.name||item.title}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import {mixin} from '../mixins'
export default {
  mixins: [mixin],
  name: 'content-list',
  props: ['contentList'],
  methods:{
    goAlbum(item){
      this.$store.commit('setTempList',item);
      if (item.name){                                        // 转向歌手中的歌曲
        this.$router.push({path: `singer-album/${item.id}`})
      }else {                                                // 歌单中的歌曲
        this.$router.push({path: `song-list-album/${item.id}`})
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/content-list.scss";
</style>
